<template>
  <div class="settings-page">
        <div class="container page">
            <div class="row">

            <div class="col-md-6 offset-md-3 col-xs-12">
                <ul class="error-messages">
                    <template v-for="(messages, field) in errors">
                        <li v-for="(message, index) in messages" :key="index">
                            {{field}} {{message}}</li>
                    </template>
                </ul>
                <h1 class="text-xs-center">Your Settings</h1>

                <form @submit.prevent="onSubmit">
                <fieldset>
                    <fieldset class="form-group">
                        <input v-model="userUpdate.image" class="form-control" type="text" placeholder="URL of profile picture">
                    </fieldset>
                    <fieldset class="form-group">
                        <input v-model="userUpdate.username" class="form-control form-control-lg" type="text" placeholder="Your Name">
                    </fieldset>
                    <fieldset class="form-group">
                        <textarea v-model="userUpdate.bio" class="form-control form-control-lg" rows="8" placeholder="Short bio about you"></textarea>
                    </fieldset>
                    <fieldset class="form-group">
                        <input v-model="userUpdate.email" class="form-control form-control-lg" type="text" placeholder="Email">
                    </fieldset>
                    <fieldset class="form-group">
                        <input v-model="userUpdate.password" class="form-control form-control-lg" type="password" placeholder="Password">
                    </fieldset>
                    <button class="btn btn-lg btn-primary pull-xs-right">
                        Update Settings
                    </button>
                </fieldset>
                </form>
                <hr/>
                <button class="btn btn-outline-danger" @click="logout">
                    Or click here to logout.
                </button>
            </div>

            </div>
        </div>
    </div>
</template>

<script>
import {mapState} from 'vuex'
import {updateUser} from '@/api/user'
const Cookie = process.client ? require('js-cookie') : undefined

export default {
    middleware:'authenticated',
    name:'settingsIndex',
    data(){
        return{
            userUpdate: {
                bio: '',
                email: '',
                image: '',
                username: '',
                password: ''
            },
            errors:{}
        }
    },
    computed:{
        ...mapState(['user','password'])
    },
    mounted(){
        this.userUpdate.bio = this.user.bio
        this.userUpdate.email = this.user.email
        this.userUpdate.image = this.user.image
        this.userUpdate.username = this.user.username
        this.userUpdate.password = this.password

    },
    methods:{
        async onSubmit(){
            try{
                console.dir(this.user)
                const {data} = await updateUser({
                        user: this.userUpdate
                })
                console.dir(data)
                this.$router.push({name:'profile',params:{username:data.user.username}})

            }catch(err){
                this.errors = err.response.data.errors
            }
        },
        logout(){
            Cookie.remove('user')
            this.$store.commit('setUser', null)
            this.$store.commit('setPassword', null)
            this.$router.push('/')
        }
    }
}
</script>

<style>

</style>